<template>
  <div class="approveLeave-warp">
    <div class="content">
      <a-table
        :scroll="{ y: `calc(100vh - 124px)` }"
        :dataSource="state.dataSource"
        :columns="columns"
        :row-selection="{
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        :pagination="false"
        row-key="code"
      >
        <template #expandedRowRender="{ record }">
          <p style="margin: 0">请假开始时间： {{ record.startTime }}</p>
          <p style="margin: 0">请假结束时间： {{ record.endTime }}</p>
          <p style="margin: 0">情况说明： {{ record.reason }}</p>
        </template>
      </a-table>
    </div>
    <Pagination
      :total="state.total"
      @pageChange="pageChange"
      :pageConfig="state.page"
    >
      <a-button
        style="margin-right: 5px"
        type="primary"
        v-if="state.selectedRowKeys.length > 0"
        @click="handleShowAgree"
        >同意</a-button
      >
      <a-button
        style="margin-right: 5px"
        type="primary"
        v-if="state.selectedRowKeys.length > 0"
        @click="handleShowDisagree"
        >驳回</a-button
      >
    </Pagination>
    <a-modal
      centered
      :closable="false"
      v-model:open="state.agreeopen"
      title="同意申请"
      @ok="handleagreeOk"
    >
      <p>是否确认并同意当前选中人员的申请？</p>
    </a-modal>
    <a-modal
      centered
      :closable="false"
      v-model:open="state.disagreeopen"
      title="驳回申请"
      @ok="handledisagreeOk"
    >
      <a-input
        v-model:value="state.form.reason"
        placeholder="请输入驳回理由（选填）"
      />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted } from "vue";
import { ref, reactive } from "vue";

import Pagination from "@/components/pagination/index.vue";
import { message } from "ant-design-vue";
import {
  useTeacherApproveLeavePage,
  useTeacherApproveLeaveUpdate,
} from "@/api";
import { useAuthParse } from "@/api/auth/auth";
import { authRedict } from "@/utils/cas";

const state = reactive({
  form: {
    reason: "",
  },
  total: 0,
  page: {
    pageNum: 1,
    pageSize: 20,
  },
  params: {
    status: [1],
    operatorCode: "",
  },
  dataSource: [],
  selectlist: [],
  selectedRowKeys: [],
  agreeopen: false,
  disagreeopen: false,
});

const columns = [
  {
    title: "学号",
    dataIndex: "employeeCode",
    key: "employeeCode",
    align: "center",
  },
  {
    title: "姓名",
    dataIndex: "employeeName",
    key: "employeeName",
    align: "center",
  },
];

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys;
};

const getData = async () => {
  let {
    result: { totalCount, items },
  } = await useTeacherApproveLeavePage({ ...state.params, ...state.page });
  state.dataSource = items || [];
  state.total = totalCount;
};

const handleagreeOk = async () => {
  let res = await useTeacherApproveLeaveUpdate({
    codeList: state.selectedRowKeys,
    operatorCode: state.params.operatorCode,
    status: 2,
  });
  if (!res.result.errList) {
    message.success("操作成功", 2);
  } else {
    message.error(res.result?.errList[0], 2);
  }

  state.selectedRowKeys = [];
  getData();
  state.agreeopen = false;
};
const handledisagreeOk = async () => {
  // const codeList = state.selectlist.map((item: any) => item.code);
  let res = await useTeacherApproveLeaveUpdate({
    codeList: state.selectedRowKeys,
    operatorCode: state.params.operatorCode,
    status: 3,
    reason: state.form.reason,
  });
  if (!res.result.errList) {
    message.success("操作成功", 2);
  } else {
    message.error(res.result?.errList[0], 2);
  }
  state.form.reason = "";
  state.selectedRowKeys = [];
  getData();
  state.disagreeopen = false;
};

const handleShowAgree = () => {
  state.agreeopen = true;
};
const handleShowDisagree = () => {
  state.disagreeopen = true;
};

const pageChange = ({ pageNum, pageSize }) => {
  state.page.pageNum = pageNum;
  state.page.pageSize = pageSize;
  getData();
};

onBeforeMount(() => {
  authRedict("http://mjkq.cqzhxy.cn:18088/m/teacher/approveLeave");
});

const initState = () => {
  useAuthParse("http://mjkq.cqzhxy.cn:18088/m/teacher/approveLeave")
    .then(({ success, result: { code, name } }) => {
      if (success) {
        state.params.operatorCode = code;
      }
    })
    .then(() => getData());
};

onMounted(() => {
  document.title = "请假审批";
  initState();
});
</script>
<style scoped lang="less">
.approveLeave-warp {
  // padding: 10px
  .content {
    height: calc(100vh - 54px);
    padding: 6px;
    background-color: #eee;
  }
}
</style>
